<template>
  <div>
    <button @click="sendMoney" :class="type1">
      <slot name="text" />
      <slot name="icon" />
    </button>
  </div>
</template>

<script>
export default {
  name: 'sg-button',
  data () {
    return {
      money: 100000
    }
  },

  props: {
    type1: {
      type: String,
      default: () => 'default'
    }
  },

  created () {

  },

  methods: {
    sendMoney () {
      // 子怎么传？
      // this.$emit? 能够触发当前组件标签上的一个自定义事件
      // 事件： 事件对象
      // 自定义的事件没有事件对象
      // this.$emit
      // 参数1： 触发的自定义事件
      // 参数2： 事件对象(要传的数据)
      this.$emit('send', this.money)
    }
  }
}
</script>

<style scoped lang='less'>
button {
  width: 300px;
  height: 100px;
  border: none;
  color: #fff;
  font-size: 30px;
  border-radius: 5px;
}
.default {
  background-color: hotpink;
}
.primary {
  background-color: blue;
}
.success {
  background-color: green;
}
</style>
